<template>
  <div class="main-container container-limited container-fluid page-holder">
    <issues-breadcrumb />
    <div class="padding-10 bg-fafafa">
      <div class="flex">
        <search-input class="m-r-10" />
        <router-link :to="`/spaces/${spaceId}/issues/new`" class="el-button el-button--primary">
          创建问题
        </router-link>
      </div>
      <div class="flex m-t-10">
        <list-filter class="p-l-16" />
        <sort-separate
          :list-type="$C.sort.issuesSortSeparate"
          :default-sort="$C.sort.issuesSortDefault"
          class="m-l-auto"
        />
      </div>
    </div>
    <issues-list :issues="issues" :loading="loading" />
    <pagination :current-page="pagination.current" :page-count="pagination.count" />
  </div>
</template>

<script>
import IssuesBreadcrumb from '@/views/issues/components/breadcrumb';
import { formatIssues } from '@/views/issues/format';
import IssuesList from '@/views/issues/components/issues-list';
import SortSeparate from '@/components/shared/SortSeparate';
import ListFilter from './list-filter';
import SearchInput from './search-input';

export default {
  name: 'IssuesIndex', // 问题列表
  components: {
    IssuesBreadcrumb,
    IssuesList,
    SortSeparate,
    ListFilter,
    SearchInput,
  },
  data() {
    return {
      issues: [],
      loading: false,
      pagination: {
        current: null,
        count: null,
      },
    };
  },
  computed: {
    spaceId() { return this.$route.params.spaceId; },
    // 加载问题列表所需参数
    loadIssuesParams() {
      const sort = this.$route.query.sort || this.$C.sort.issuesSortDefault;
      return {
        spaceId: this.spaceId,
        type: this.$route.query.type || 'all',
        isGood: this.$route.query.is_good || undefined,
        page: this.$route.query.page || 1,
        sort: this.$C.sort.sortType[sort.split('_')[0]], // 排序类型
        order: sort.split('_')[1],
      };
    },
  },
  created() { this.loadIssues(); },
  methods: {
    // 加载问题列表
    loadIssues() {
      this.loading = true;
      this.$api.spaceIssues.index(this.loadIssuesParams)
        .then((res) => {
          this.issues = formatIssues(res.data);
          this.pagination.current = res.kaminari.current_page;
          this.pagination.count = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    loadIssuesParams() { this.loadIssues(); },
  },
};
</script>

<style></style>
